﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title></title>
	<style type="text/css">
		.block1 {
			width: 100px;
			height: 100px;
			border: 2px solid #efefef;
			padding: 10px;
			margin: 8px;
			background-color: #cccccc;
		}
		.blockx1 {
			font-size: 18px;
		}		
		.bgWhite{ background-color: #ffffff; }
		.bgYellow{ background-color: #ffcc33; }
		.bcGreen { border-color: #30a936; }
		.fwBold { font-weight: bolder; }
	</style>
	<script type="text/javascript" src="json2.js"></script>
	<script type="text/javascript" src="core.js"></script>
	<script type="text/javascript" src="element.js"></script>
  <script type="text/javascript">
  
	var el1;
	function init(){
		el1 = $('div1');
		//alert(el1.fireEvent);
		//echo(el1.test1, typeof el1.appendChild);
		$('browserEngine').innerHTML = Qi.browser.engine.name;
	}
  
	//ajax test=============
	function test1(){this.id = 'TEST1';}
	function test2(){this.id = 'TEST2';}
	function test3(){this.id = 'TEST3';}
	function method1(arg){
		this.id += '...'+arg;
		return this;
	}
	
	function run(){ //ajax call
		var fn = method1.bind(new test2());
		var o = method1.bind(new test2())('ook');
		alert(o.id);
	}
	
	//=============
	
	var clickEvent = function(){alert('click');}
	var clickEvent2 = function(){alert('click2');}
	var enterEvent = function(){
		this.addClassName('bgYellow');
		this.removeClassName('bgWhite');
	}
	var leaveEvent = function(){
		this.removeClassName('bgYellow');
		this.addClassName('bgWhite');
	}

	function run2(){
		//el.addEvent('click',clickEvent);
		//el1.addEvent('click',clickEvent2);
		el1.addEvents({
			'click':clickEvent
			,'mouseover': enterEvent
			,'mouseout': leaveEvent
		});
		print();
	}
	
	function run2_2(){
		el1.removeEvents('click','mouseover','mouseout');
		print();
	}
	
	function run3(){
		var o = {'a':1,'b':2,'c':3,'d':4,'e':5};
		echo(JSON.stringify(o));
		Qi.removeMember(o, 'c','d');
		echo(JSON.stringify(o));
	}
	function run4(){
		el1.addClassNames('fwBold','bcGreen','bgYellow');
	}
	function run5(){
		el1.removeClassNames('fwBold','bcGreen','bgYellow');
	}

	function run6(){
		el1.setStyle('border','10px solid #ff6699');
		el1.setStyles({
			'border-bottom': '7px solid #ffff99'
			,'border-top': '5px solid #6699ff'
			,'border-left': '5px solid #66ff99'
		});
	}
	function run7(){
		el1.removeStyles('border-left','border-right');
	}
	function run8(e){

		var targ = Qi.findEventHandler(e);
		targ.style.border = el1.getOpacity() == 1 ?'2px solid red':'1px ridge gray';

		var n = el1.getOpacity() == 1? 0.3: 1;
		el1.setOpacity(n);
	}
	
	function run9(){
		$('btn8').fireEvent('onclick');
	}
	
	function run10(){
		var x = el1.getStyle('background-color');
		alert(x);
	}
	
	function run11(){
		el1.fadeOut();
	}

	function run12(){
		el1.fadeIn();
	}
	
	function test(){
		var o = new Array();
		echo(o.hasOwnProperty);
		//var el = Element.create('div',{});
		//alert(el.getType());
	}

	function print(){
		//alert(JSON.stringify(Qi));
	}

  </script>
</head>
<body onload="init()">
  <form id="form1" runat="server">
	  <div style="padding: 50px; width: 300px; float:left;">
	  	Browser engine: <span id="browserEngine"></span>
	  	<br />
	  	<input type="button" value="el.addEvents" onclick="run2();" />
	  	<input type="button" value="el.removeEvents" onclick="run2_2();" />
	  	<input type="button" value="el.addClassNames" onclick="run4();" />
	  	<input type="button" value="el.removeClassNames" onclick="run5();" />
	  	<input type="button" value="el.setStyles" onclick="run6();" />
	  	<input type="button" value="el.removeStyles" onclick="run7();" />
	  	<input type="button" value="el.setOpacity" onclick="run8(event);" id="btn8" />
	  	<input type="button" value="fire event: el.setOpacity" onclick="run9();" />
	  	<input type="button" value="el.getStyle" onclick="run10();" />
	  	<input type="button" value="el.fadeOut" onclick="run11();" />
	  	<input type="button" value="el.fadeIn" onclick="run12();" />
	  	<input type="button" value="Qi.removeMember" onclick="run3();" />
	  	<input type="button" value="test" onclick="test();" />
		</div>
		<div style="padding: 50px; float:left;">
	  	<div id="div1" class="block1   blockx1">
	  		block1
	  	</div>
		</div>
  </form>
</body>
</html>
